<template>
  <a-form-model ref="formRef" :model="model" :rules="validatorRules" v-bind="formItemLayout">
    <a-tabs :default-active-key="1" :tab-position="tabPosition" v-model="activeKey" @change="callback">
      <a-tab-pane v-for="item in configList" :key="item.type">
        <span slot="tab">
          <img class="tab-img" v-if="item.type == 1" src="~@/assets/icon/u20918.svg" />
          <img class="tab-img" v-if="item.type == 2" src="~@/assets/icon/u20912.svg" />
          <img class="tab-img" v-if="item.type == 3" src="~@/assets/icon/u20918.svg" />
          {{ item.label }}
        </span>
        <a-form-model-item label="通报类型" prop="noticeType">
          <a-radio-group v-model="model.noticeType" button-style="solid">
            <a-radio-button :value="1"> 手动 </a-radio-button>
            <a-radio-button :value="2"> 自动 </a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="通报时间" prop="noticeDay" v-if="Object.keys(model).length > 0 && model.noticeType==2">
          <a-space>
            <j-search-select-tag v-model="model.noticeDay" :dictOptions="dateArr" :allowClear="false" placeholder="请选择日期" style="width:100px;"  />
            <a-time-picker v-model="model.noticeHour" valueFormat="HH:mm" format="HH:mm" placeholder="通报时间" />
          </a-space>
        </a-form-model-item>
        <a-form-model-item label="通报单位" prop="noticeUnitId" v-if="Object.keys(model).length > 0 && model.noticeType==2">
          <j-select-depart v-model="model.noticeUnitId" :trigger-change="true" :multi="true" @rows="getSelectRows($event)" />
        </a-form-model-item>
        <a-form-model-item class="submit-form-model-item" :wrapper-col="noLabelwrapperCol">
          <a-space>
            <a-button type="primary" @click="onSubmit">保存</a-button>
          </a-space>
        </a-form-model-item>
      </a-tab-pane>
    </a-tabs>
  </a-form-model>
</template>

<script>
import { workNotificationConfig, getWorkNotificationConfig } from '@/api/sjsk/personService'

import moment from 'moment';
export default {
  data() {
    return {
      moment,
      formItemLayout: {
        labelCol: { span: 2, offset: 1 },
        wrapperCol: { span: 17 }
      },
      noLabelwrapperCol: { span: 19, offset: 1 },
      tabPosition: 'left',
      activeKey: 1,
      dateArr: [],
      configList: [
        { label: '省内异地管控工作通报', type: 1 },
        { label: '省外异地管控工作通报-外省转入', type: 3 },
        { label: '省外异地管控工作通报-转出省外', type: 2 }
      ],
      model: {},
      validatorRules: {
        noticeType:[ { required: true, message: '请选择通报类型' }],
        noticeDay:[ { required: true, message: '请选择通报时间' }],
        noticeUnitId:[ { required: true, message: '请选择通报单位' }],
      }
    }
  },
  mounted() {
    this.initForm(false)
  },
  methods: {
    callback(val) {
      this.initForm()
    },
    // 提交保存
    onSubmit() {
      const parameter = Object.assign({}, this.model)
      this.$refs.formRef.validate(valid => {
        if (valid) {
          workNotificationConfig(parameter)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message ? res.message : '操作成功')
              } else {
                this.$message.warn(res.message ? res.message : '操作失败')
              }
            })
            .catch(e => {
              this.$message.warn('操作失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取配置详情
    initForm(bool=true) {
      if(bool===false) {
        let dayLenth = 31;
        for (let i = 0; i < dayLenth; i++) {
          let it = i+1
          let iFormat = it < 10 ? "0" + it : it.toString()
          this.dateArr.push({text: it.toString()+'号', value:iFormat})
        }
      }
      this.$set( this.model, 'type', this.activeKey)
      getWorkNotificationConfig(this.activeKey)
        .then(res => {
          if (res.success) {
            const { result } = res
            if (result && Object.keys(result).length > 0) {
              this.model = Object.assign({}, this.model, result)
            } else {
              this.$set(this.model, 'noticeType', 1)
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    getSelectRows(rows) {
      console.log(rows)
      let adminDivisionStrs = rows && rows.length>0?rows.map(v => v.adminDivisionStr).join(','):''
      let titles = rows && rows.length>0?rows.map(v => v.title).join(','):''
      this.$set(this.model, 'noticeUnitName', titles)
      // this.$set(this.model, 'noticeUnitId', adminDivisionStrs)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-tabs {
  :deep(.ant-tabs-bar) {
    background-color: #fff;
    margin-right: 10px;
    &.ant-tabs-left-bar {
      min-height: 550px;
      border-left: 1px #e8e8e8 solid;
      border-top: 1px #e8e8e8 solid;
    }
    .ant-tabs-tab {
      padding-top: 12px !important;
      padding-bottom: 12px !important;
      // padding-left: 0 !important;
      margin-bottom: 0 !important;
      text-align: left !important;
      border-bottom: 1px #e8e8e8 solid;
      .tab-img {
        border: 1px rgb(166, 222, 214) solid;
        border-radius: 50%;
        padding: 10px;
        margin-right: 10px;
        &.org {
          border: 1px rgb(250, 173, 20) solid;
        }
      }
      &.ant-tabs-tab-active {
        background-color: #eef7ff;
      }
    }
  }
  
  :deep(.ant-tabs-content) {
    padding-top: 30px;
    min-height: 550px;
    background-color: #fff;
  }
  .submit-form-model-item {
    margin-top: 100px;
    .ant-form-item-control {
      text-align: right;
    }
  }
}
</style>
